@import "./../theme";
@import "./../var";

.components-list-aside {
  width: 250px !important;
  height: 100%;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;

  .components-list-title {
    height: 3rem;
    display: block;
    line-height: 3rem;
    font-size: $fontSizeRegular;
    font-weight: bold;
    padding: 0 0.5rem;
    color: $colorTextRegular;
    background: url("./../../images/form_design_components_list.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .components-list {
    width: 100%;
    padding: 0;
    flex: 1;
    overflow-y: auto;
    border-top: transparent !important;
    // 隐藏滚动条
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }

    .el-collapse-item__header {
      padding: 0 $paddingHorizontal/2;
      font-size: $fontSizeRegular;
      height: 2.2rem;

      &:before {
        content: '';
        height: 0.8rem;
        width: 2px;
        background: $colorPrimary;
        margin-right: 0.3rem;
        border-radius: 0 2px 2px 0;
      }
    }

    & > .el-collapse-item {

      &:nth-of-type(1) {
        .el-collapse-item__header {
          &:before {
            background: $colorPrimary;
          }
        }
      }

      &:nth-of-type(2) {
        .el-collapse-item__header {
          &:before {
            background: $colorSuccess;
          }
        }
      }

      &:nth-of-type(3) {
        .el-collapse-item__header {
          &:before {
            background: $colorWarning;
          }
        }
      }
    }

    .el-collapse-item__wrap {
      border-color: transparent !important;
    }

    .el-collapse-item__content {
      padding: 0;
    }

    ul {
      position: relative;
      overflow: hidden;
      padding: $paddingVertical/2 $paddingHorizontal/2;
      margin: 0;
    }

    .components-item {
      font-size: $fontSizeSmall;
      display: inline-flex;
      height: 2rem;
      width: 48%;
      left: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 1%;
      color: $colorTextRegular;
      border: 1px solid $borderColorLight;
      border-radius: $radiusRegular;
      align-items: center;
      vertical-align: top;
      padding: 0 0.5rem;
      cursor: move;


      .base-icon {
        width: 1.5rem;
        max-width: 1.5rem;
        min-width: 1.5rem;
        font-size: $fontSizeRegular;
        text-overflow: ellipsis;
      }

      span {
        @include text-ellipsis;
      }

      &:hover {
        background: $borderColorLight;
        border-color: $borderColorPrimary;
      }

      &:active {
        background: $colorPrimary;
        border-color: $colorPrimary;
        color: $colorTextInverse;
        border-radius: $radiusSmall;
      }
    }
  }
}

